<template>
  <div v-if="tabs" class="tabs-content">
    <div 
      v-for="(item, index) in tabs"   
      :class="item.value == activeTab? 'tabItem tabItemActive':'tabItem'" 
      :key="item.name+index"
      @click="handleChangeTab(item.value)">
      {{item.name}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: null
    },
    activeTab: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
        
    }
  },
  methods: {
    handleChangeTab(data) {
      console.log(data)
      this.$emit('updateTab', data)
    }
  }
}
</script>

<style lang="scss" scoped>
  .tabs-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    .tabItem{
      font-weight: 400;
      font-size: 16px;
      color: rgba(255,255,255,0.5);
      text-align: center;
      line-height: 38px;
      width: 132px;
      height: 38px;
      background-image: url("@/assets/images/bot_unchecked.png");
      background-size: 100% 100%;
      margin-right: 20px;
      cursor: pointer;
    }
    .tabItemActive{
      background-image: url("@/assets/images/bot_checked.png");
      color: #fff;
    }
  }
</style>